<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>Emulatrix Banner Generator</title>
		<meta property="og:title" content="Emulatrix"/>
		<meta property="og:url" content="https://www.emulatrix.net"/>
		<meta property="og:description" content="Play Retro Games Online"/>
		<meta property="og:image" content="https://www.emulatrix.net/EmulatrixShare.png"/>
		<meta property="og:type" content="website"/>
		<meta property="og:site_name" content="Emulatrix"/>
		<meta name="theme-color" content="#000000"/>
		<meta name="mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="description" content="JavaScript Emulator. Sega Genesis, Nintendo, Super Nintendo, GameBoy, GameBoy Color, GameBoy Advance, MAME32, DOSBox and Virtual Machines."/>
		<meta name="keywords" content="emulator, abandonware, games, sega, genesis, nintendo, super, gameboy, color, advance, mame, mame32, arcade, dos, dosbox, javascript, emscripten, online, free, open, source"/>
		<link rel="icon" sizes="16x16" type="image/png" href=""/>
		<link rel="icon" sizes="192x192" type="image/png" href=""/>
		<link rel="apple-touch-icon" href=""/>
		<link rel="apple-touch-startup-image" href=""/>
		<style>
			html{margin:0;padding:0}
			body{margin:0;padding:0;background-color:white}
			canvas{display:none;text-rendering:optimizeLegibility}
			div{position:absolute;left:0;right:0;top:0;width:1024px;margin:0 auto;background-color:white}
			input[type=file]{height:30px;font-family:Arial;font-size:13px;line-height:30px;vertical-align:top;margin:0;padding:0;box-sizing:border-box}
			img{display:block;vertical-align:bottom;margin:0 auto}
		</style>
	</head>
	<body>
		<canvas width="1024" height="589" id="myCanvas"></canvas>

		<div>
			<input type="file" id="screenshot">
			<img width="1024" height="589" id="finalResult" alt="banner" src="">
		</div>

		<script>
			window.addEventListener("load", function()
				{
				// 1024x589 MACBOOK IMAGE IN PNG FORMAT
				var macbookimg = "";

				// 200x200 LOGO IMAGE IN PNG FORMAT
				var logoimg = "";

				// LOADING THE MACBOOK IMAGE
				var image1 = new Image;
				image1.onload = update; // CALLING THE UPDATE FUNCTION WHEN THE IMAGE IS LOADED
				image1.src = macbookimg;

				// LOADING THE LOGO IMAGE
				var image2 = new Image;
				image2.onload = update; // CALLING THE UPDATE FUNCTION WHEN THE IMAGE IS LOADED
				image2.src = logoimg;

				// GETTING ALL THE ELEMENTS IN THE WEB FORM
				var canvas = document.getElementById("myCanvas");

				// CLEARING ALL THE INPUTTED VALUES (IF ANY)
				document.getElementById("screenshot").value = null;

				// USING A VARIABLE IN ORDER TO KNOW WHEN ALL THE GRAPHICAL ELEMENTS ARE LOADED
				var elementsLoadedCounter = 0;

				function update()
					{
					// INCREASING THE ELEMENT LOADED COUNTER
					elementsLoadedCounter++;

					// CHECKING IF THE RIGHT AMOUNT OF ELEMENTS ARE LOADED
					if (elementsLoadedCounter < 2)
						{
						// IF NOT, RETURNING WITHOUT EXECUTING ANYTHING ELSE
						return;
						}

					// GETTING THE CONTEXT
					var context = canvas.getContext("2d");

					// DRAWING THE MACBOOK
					context.drawImage(image1, 0, 0, 1024, 589);

					try
						{
						// CREATING THE FILEREADER
						var filereader = new FileReader();

						// GETTING THE EXTENSION
						var extension = document.getElementById("screenshot").files[0].name.split(".").pop().toLowerCase();

						// CHECKING THE EXTENSION IN ORDER TO KNOW IF THE FILE IS AN IMAGE
						if (extension=="jpg" | extension=="jpeg" | extension=="png")
							{
							// SETTING WHAT WILL HAPPEN WHEN THE FILE IS LOADED
							filereader.onload = function()
								{
								// LOADING THE IMAGE FILE
								var image3 = new Image;
								image3.onload = function()
									{
									// RESIZING THE IMAGE FILE TO THE EXPECTED SIZE - 1920x1200
									var image4 = new Image;
									image4.onload = function()
										{
										// SETTING THE IMAGE WIDTH AND HEIGHT
										var width = 680;
										var height = 427;

										try
											{
											// SETTING THE IMAGE SCALE
											var scale = width * 1 / image4.width;

											// GETTING THE RESIZED IMAGE
											var imagenResized = downScaleImage(image4, scale);

											// DRAWING THE RESIZED IMAGE
											context.drawImage(imagenResized, 173, 71, width, height);
											}
											catch(err)
											{
											// IF THERE IS AN ERROR, IT MEANS THAT THE FILE IMAGE IS SMALLER THAN
											// THE SIZE THAT IT SUPPOSED TO FILL. SO, BECAUSE OF THIS,
											// IN THE FOLLOWING LINE THE IMAGE IS STRETCHED TO FILL.
											context.drawImage(image4, 236, 80, width, height);
											}

										// DRAWING THE LOGO SHADOW
										var centerX = 918;
										var centerY = 483;
										var radius = 100;
										context.beginPath();
										context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
										context.fillStyle = "#101010";
										context.alpha = 0.5;
										context.closePath();
										context.fill();

										// DRAWING THE LOGO
										context.drawImage(image2, 815, 380, 200, 200);

										// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
										document.getElementById("finalResult").src = canvas.toDataURL("data/png");
										}
									image4.src = resizeImageToFit(image3, 1920, 1200);
									};
								image3.src = filereader.result;
								};

							// READING/LOADING THE FILE
							filereader.readAsDataURL(document.getElementById("screenshot").files[0]);
							}
							else
							{
							// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
							document.getElementById("finalResult").src = canvas.toDataURL("data/png");
							}
						}
						catch(err)
						{
						// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
						document.getElementById("finalResult").src = canvas.toDataURL("data/png");
						}
					}

				function resizeImageToFit(img, width, height)
					{
					// CREATE AN OFF-SCREEN CANVAS
					var canvas = document.createElement("canvas");
					var ctx = canvas.getContext("2d");

					// SETTING THE DIMENSIONS TO TARGET SIZE
					canvas.width = width;
					canvas.height = height;

					// DRAWING SOURCE IMAGE INTO THE OFF-SCREEN CANVAS
					ctx.drawImage(img, 0, 0, width, height);

					// EXPORTING THE PICTURE AS A PNG IMAGE IN BASE64 FORMAT
					return canvas.toDataURL("data/png");
					}

				function downScaleImage(img, scale)
					{
					var imgCV = document.createElement("canvas");
					imgCV.width = img.width;
					imgCV.height = img.height;
					var imgCtx = imgCV.getContext("2d");
					imgCtx.drawImage(img, 0, 0);
					return downScaleCanvas(imgCV, scale);
					}

				function downScaleCanvas(cv, scale)
					{
					if (!(scale < 1) || !(scale > 0)) throw ("scale must be a positive number <1 ");
					var sqScale = scale * scale;
					var sw = cv.width;
					var sh = cv.height;
					var tw = Math.floor(sw * scale);
					var th = Math.floor(sh * scale);
					var sx = 0, sy = 0, sIndex = 0;
					var tx = 0, ty = 0, yIndex = 0, tIndex = 0;
					var tX = 0, tY = 0;
					var w = 0, nw = 0, wx = 0, nwx = 0, wy = 0, nwy = 0;
					var crossX = false;
					var crossY = false;
					var sBuffer = cv.getContext("2d").getImageData(0, 0, sw, sh).data;
					var tBuffer = new Float32Array(4 * sw * sh);
					var sR = 0, sG = 0,  sB = 0;
					var sA = 0;

					for (sy = 0; sy < sh; sy++)
						{
						ty = sy * scale;
						tY = 0 | ty;
						yIndex = 4 * tY * tw;
						crossY = (tY != (0 | ty + scale));
						if (crossY)
							{
							wy = (tY + 1 - ty);
							nwy = (ty + scale - tY - 1);
							}
						for (sx = 0; sx < sw; sx++, sIndex += 4)
							{
							tx = sx * scale;
							tX = 0 |  tx;
							tIndex = yIndex + tX * 4;
							crossX = (tX != (0 | tx + scale));
							if (crossX)
								{
								wx = (tX + 1 - tx);
								nwx = (tx + scale - tX - 1);
								}
							sR = sBuffer[sIndex];
							sG = sBuffer[sIndex + 1];
							sB = sBuffer[sIndex + 2];
							sA = sBuffer[sIndex + 3];
							if (!crossX && !crossY)
								{
								tBuffer[tIndex] += sR * sqScale;
								tBuffer[tIndex + 1] += sG * sqScale;
								tBuffer[tIndex + 2] += sB * sqScale;
								tBuffer[tIndex + 3] += sA * sqScale;
								}
							else if (crossX && !crossY)
								{
								w = wx * scale;
								tBuffer[tIndex] += sR * w;
								tBuffer[tIndex + 1] += sG * w;
								tBuffer[tIndex + 2] += sB * w;
								tBuffer[tIndex + 3] += sA * w;
								nw = nwx * scale
								tBuffer[tIndex + 4] += sR * nw;
								tBuffer[tIndex + 5] += sG * nw;
								tBuffer[tIndex + 6] += sB * nw;
								tBuffer[tIndex + 7] += sA * nw;
								}
							else if (crossY && !crossX)
								{
								w = wy * scale;
								tBuffer[tIndex] += sR * w;
								tBuffer[tIndex + 1] += sG * w;
								tBuffer[tIndex + 2] += sB * w;
								tBuffer[tIndex + 3] += sA * w;
								nw = nwy * scale
								tBuffer[tIndex + 4 * tw    ] += sR * nw;
								tBuffer[tIndex + 4 * tw + 1] += sG * nw;
								tBuffer[tIndex + 4 * tw + 2] += sB * nw;
								tBuffer[tIndex + 4 * tw + 3] += sA * nw;
								}
							else
								{
								w = wx * wy;
								tBuffer[tIndex] += sR * w;
								tBuffer[tIndex + 1] += sG * w;
								tBuffer[tIndex + 2] += sB * w;
								tBuffer[tIndex + 3] += sA * w;
								nw = nwx * wy;
								tBuffer[tIndex + 4] += sR * nw;
								tBuffer[tIndex + 5] += sG * nw;
								tBuffer[tIndex + 6] += sB * nw;
								tBuffer[tIndex + 7] += sA * nw;
								nw = wx * nwy;
								tBuffer[tIndex + 4 * tw] += sR * nw;
								tBuffer[tIndex + 4 * tw + 1] += sG * nw;
								tBuffer[tIndex + 4 * tw + 2] += sB * nw;
								tBuffer[tIndex + 4 * tw + 3] += sA * nw;
								nw = nwx * nwy;
								tBuffer[tIndex + 4 * tw + 4] += sR * nw;
								tBuffer[tIndex + 4 * tw + 5] += sG * nw;
								tBuffer[tIndex + 4 * tw + 6] += sB * nw;
								tBuffer[tIndex + 4 * tw + 7] += sA * nw;
								}
							}
						}

					var resCV = document.createElement("canvas");
					resCV.width = tw;
					resCV.height = th;
					var resCtx = resCV.getContext("2d");
					var imgRes = resCtx.getImageData(0, 0, tw, th);
					var tByteBuffer = imgRes.data;

					var pxIndex = 0;
					for (sIndex = 0, tIndex = 0; pxIndex < tw * th; sIndex += 4, tIndex += 4, pxIndex++)
						{
						tByteBuffer[tIndex] = Math.ceil(tBuffer[sIndex]);
						tByteBuffer[tIndex + 1] = Math.ceil(tBuffer[sIndex + 1]);
						tByteBuffer[tIndex + 2] = Math.ceil(tBuffer[sIndex + 2]);
						tByteBuffer[tIndex + 3] = Math.ceil(tBuffer[sIndex + 3]);
						}

					resCtx.putImageData(imgRes, 0, 0);
					return resCV;
					}

				// SETTING WHAT WILL HAPPEN WHEN THE USER SELECTS A FILE
				document.getElementById("screenshot").addEventListener("change",function(e){update()});
				});
		</script>
	</body>
</html>